<template>
	<view>
		<view class="banner">
			<view class="marquee_container" style="--marqueeWidth--:-12em">
				<view class="marquee_text">{{marquee}}</view>
			</view>
			<u-swiper :list="list" :autoplay="false" mode="none" border-radius="0" height="300"></u-swiper>
		</view>
		<!-- <template v-for="(item,index) in roleList"> -->
			<view class="menuItem" v-show="allow === '1'">
				<view class="menuHead">
					<view class="leftCon">
						<u-icon name="order" color="#51D1E7" size="35"></u-icon>
						<view class="labelName">
							件杂货查询
						</view>
					</view>
					<view class="rightArrow">
						<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
					</view>
				</view>
				<view class="menuBody">
					<view class="item" @click="tapTake">
						<image src="../../static/24gl-box2.png" mode=""></image>
						<view class="name">
							作业查询
						</view>
					</view>

					<view class="item" @click="tapBack">
						<image src="../../static/24gl-box.png" mode=""></image>
						<view class="name">
							理货单据
						</view>
					</view>
					
					<view class="item" @click="uploadPic" v-if="userInfo.nickName === 'admin'">
						<image src="../../static/huoche.png" mode=""></image>
						<view class="name">
							数据上传
						</view>
					</view>
				</view>
			</view>
			
			<view class="menuItem" v-show="allow === '1'">
				<view class="menuHead">
					<view class="leftCon">
						<u-icon name="order" color="#51D1E7" size="35"></u-icon>
						<view class="labelName">
							集装箱查询
						</view>
					</view>
					<view class="rightArrow">
						<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
					</view>
				</view>
				<view class="menuBody">
					<view class="item" @click="tapCar">
						<image src="../../static/huoche.png" mode=""></image>
						<view class="name">
							集装箱查询
						</view>
					</view>
				</view>
			</view>	
			<view class="menuItem">
				<view class="menuHead">
					<view class="leftCon">
						<u-icon name="order" color="#51D1E7" size="35"></u-icon>
						<view class="labelName">
							进港系统
						</view>
					</view>
					<view class="rightArrow">
						<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
					</view>
				</view>
				<view class="menuBody">
					<view class="item" @click="carYY">
						<image src="../../static/huoche.png" mode=""></image>
						<view class="name">
							进港预约
						</view>
					</view>
					<view class="item" @click="carOk" v-if="allow == '1'">
						<image src="../../static/huoche.png" mode=""></image>
						<view class="name">
							进港确认
						</view>
					</view>
				</view>
			</view>	
		<template v-for="(item,index) in roleList">
			<view class="menuItem" v-if="item === '管理员'">
				<view class="menuHead">
					<view class="leftCon">
						<u-icon name="order" color="#51D1E7" size="35"></u-icon>
						<view class="labelName">
							权限管理
						</view>
					</view>
					<view class="rightArrow">
						<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
					</view>
				</view>
				<view class="menuBody">
					<view class="item" @click="qxgl">
						<image src="../../static/24gl-box2.png" mode=""></image>
						<view class="name">
							权限管理
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				list: [{
					// image: '/static/img/bg.jpg'
					image: 'https://api.zlkj-port.com/prod-api/profile/img/bg.jpg'
				}],
				marquee:'',
				roleList: [],
				allow: '', //	portrole权限
				portname: ''
				// permit: uni.getStorageSync('userInfo').permit,
				// nickName: uni.getStorageSync('nickName')
			};
		},
		computed: {
			...mapState(['activePort', 'userInfo'])
		},
		onLoad(option) {
			this.allow = option.allow
			this.portname = option.portname
			this.roleList = uni.getStorageSync("userInfo").roleName.split(',')
			uni.request({
				url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/YMss8TNkbNYTNOK',
				method: "get",
				success: (res) => { 
					 this.marquee=res.data.rows[0].MARQUEE
				}
			})
		},
		methods: {
			carYY() {
				uni.navigateTo({
					url: './caryy'
				})
			},
			carOk() {
				uni.navigateTo({
					url: './carOk'
				})
			},
			qxgl() {
				uni.navigateTo({
					url: '../driver1/adminManage?portname=' + this.portname
				})
			},
			tapTake() {
				uni.navigateTo({
					url: './workSearch'
				})
			},
			tapBack() {
				uni.navigateTo({
					url: './tallyDoc'
				})
			},
			yancan() {
				uni.navigateTo({
					url: './yancan'
				})
			},
			czxzp() {
				uni.navigateTo({
					url: './czxzp'
				})
			},
			tapCar() {
				uni.navigateTo({
					url: './boxSearch'
				})
			},
			tapcancelCar() {
				uni.navigateTo({
					url:'./cancelCar'
				})
			},
			clickIn(){
				uni.navigateTo({
					url:'./clockin'
				})
			},
			allsearch() {
				uni.navigateTo({
					url:'./allsearch'
				})
			},cancelTeam() {
				uni.navigateTo({
					url:'./cancelTeam'
				})
			},
			sendteam() {
				uni.navigateTo({
					url:'./sendteam'
				})
			},
			sendteamhistory() {
				uni.navigateTo({
					url:'./sendteamhistory'
				})
			},
			billpay() {
				uni.navigateTo({
					url:'../pay/billpay'
				})
			},
			otherpay() {
				uni.navigateTo({
					url:'../pay/otherpay'
				})
			},
			uploadPic() {
				uni.navigateTo({
					url: './fileupload'
				})
			}
		}
	}
</script>

<style lang="scss">
	.banner {}
	/*首页跑马灯效果*/
	@-webkit-keyframes around {
	from {
	   margin-left: 100%;
	}
	to {
	   /* var接受传入的变量 */
	   margin-left: var(--marqueeWidth--);
	}
	}
	@keyframes around {
	from {
	   margin-left: 100%;
	}
	to {
	   /* var接受传入的变量 */
	   margin-left: var(--marqueeWidth--);
	}
	}
	.marquee_container{
	  background-color: #497ac8;
	  height: 50rpx;
	  line-height: 44rpx;
	  position: relative;
	  width: 100%;
	  margin-top:0rpx;
	}
	.marquee_container:hover{
	  /* 不起作用 */
	  -webkit-animation-play-state: paused;
	          animation-play-state: paused;
	}
	.marquee_text{
	  color:#b50000;
	  font-size: 30rpx;
	  display: inline-block;
	  white-space: nowrap;
	  -webkit-animation-name: around;
	          animation-name: around;
	  -webkit-animation-duration: 10s;
	          animation-duration: 10s;  /*过渡时间*/
	  -webkit-animation-iteration-count: infinite;
	          animation-iteration-count: infinite;
	  -webkit-animation-timing-function:linear;
	          animation-timing-function:linear;
	}
	/*首页跑马灯效果*/
	.menuItem {
		width: 710rpx;
		margin: 0 auto;

		.menuHead {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.leftCon {
				display: flex;
				align-items: center;

				.labelName {
					margin-left: 10rpx;
					color: #868887;
				}
			}
		}

		.menuBody {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.item {
				width: 50%;
				border: 1rpx solid #EFEFEF;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 355rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 10rpx;
				}

				.name {
					font-size: 30rpx;
					color: #868887;
				}
			}
		}
	}
</style>
